<template>
    <div class="panel-datasource-div">
        <div class="panel-datasource-div-div" >
            <p class="panel-datasource-div-div-p">
                <span class="zlstbd-icon-add-column" style="color:#508ae4"></span>
            </p>
            <h3 class="panel-datasource-div-div-h3" style="">{{panel.layoutName}}</h3>
            <p class="panel-datasource-div-div-p-a">
                <a class="zlstbd-icon-more" style="color:#508ae4"></a>
            </p>
        </div>
        <div style="margin-top: 2px;">
            <Tabs :animated="false" v-model="index">
                <TabPane :label="element.item.graphName"  v-for="(element, index) in elementList" :key="index" >
                    <panel-tab-pane ref="panelTabPane" :elementGraphId="element.item.graphId + ''"></panel-tab-pane>  
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>

import panelTabPane from "./panel-tab-pane.vue"
import getData from 'getData'
import util from 'util'

export default {
    components:{
        panelTabPane
    },
    props:{
        panel:{
            type:Object
        }
    },
    data(){
        return{
            index:0,
            elementList:[],
        }
    },
    methods:{
        queryElementList(){
            getData.get('queryLayoutId',{},this.panel.layoutId).then((res) => {
                if (res.status == 200 && res.data.code == '000') {
                    var onePanel = res.data.data;
                    onePanel.config = JSON.parse(onePanel.config);
                    this.elementList = onePanel.config.config.showList;
                }else{
                    this.$Message.error("查询面板信息失败!");
                }
            });
        },
    },
    mounted(){
        this.queryElementList();
    }
}
</script>


<style lang="less">
.panel-datasource-div{
        background:#ffffff;
        width:1280px;
        height:88px;
        position: relative;
        .panel-datasource-div-div{
            padding-top: 18px;
            padding-left: 53px;
        }
        .panel-datasource-div-div-p{
            width:24px;
            height:24px;
            position:absolute;
            left: 22px;
            top: 18px; 
            font-size: 22px;
        }
        .panel-datasource-div-div-p-a{
                width:24px;height:24px;position:absolute;right: 22px;top: 18px; font-size: 22px;
            }
        .panel-datasource-div-div-h3{
            font-size:22px;color:#212121;letter-spacing:0;text-align:left;
        }
    }
.ivu-tabs-bar{
    border-bottom-width: 0px;
    
}

</style>
